<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="btnClick">add</button>

    <ul>
      <li v-for="item in letters">{{item}}</li>
    </ul>
  </div>


  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        letters: ['a', 'b', 'e', 'd']
      },
      methods: {
        btnClick() {
          //  通过push方法
          // this.letters.push('aaa')

          // pop 删除最后一个
          // this.letters.pop();

          // shift()  删除第一个
          // this.letters.shift();

          // unshift() 在数组最前面添加元素
          // this.letters.unshift('aaaa')

          // this.letters.splice()
          // this.letters.splice(1, 3, 'N', 'M', 'S');

          // sort()
          // this.letters.sort()

          // this.letters.reverse()



          // 通过索引值修改数组中的元素 这个操作是非响应式的！！！！
          // this.letters[0]='bbbbb'

          // 解决方法 1
          // this.letters.splice(0, 1, 'A')

          // 解决方法 2
          Vue.set(this.letters, 0, 'CCC')

        }
      }
    })
  </script>

</body>

</html>